import react,{useState,useEffect}  from 'react'
import './App.css';


function TodoList() {
  const [list,setList] = useState('')
  const [arrList,setArrList] = useState(['111','2222'])
  function handleModify(e){
      setList(()=>{
          return e.target.value
      })
  }
  function handleAdd(){
    //   console.log(arrList, list)
      setArrList((prevState)=>{
          return [...prevState, list]
      })
      setList('')
  }
  function drawDom(){
    return arrList.map((item,index)=>{
        return (
            <div onClick={()=>handleDelete(index)} key={item} className="list-inline">
                {item}
            </div>
        )
    })
  }
  function handleDelete(index){
    setArrList([...arrList.slice(0, index), ...arrList.slice(index + 1)]);
  }
  return (
    <div className="App">
       <label htmlFor="ceshi">aaaa</label>
       <input value={list  } onChange={(e)=>{handleModify(e)}} id="ceshi" name='ceshi' />
       <button onClick={handleAdd}>添加</button>
       {drawDom()}
    </div>
  );
  
}

export default TodoList;
